<template>
  <a-button class="btn" type="primary" :size="size" @click="handleAddClick">
    <template #icon>
      <FileAddOutlined />
    </template>
    添加
  </a-button>
  <a-table :columns="columns" :data-source="data" :pagination="{
    pageSize: 5
  }">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'index'">
        <span>
          #
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key === 'index'">
        <a>
          {{ index + 1 }}
        </a>
      </template>
      <template v-else-if="column.key === 'preview'">
        <img class="img" :src="record.img" alt="">
      </template>
      <template v-else-if="column.key === 'operation'">
        <a-popconfirm title="你真的删除吗?" ok-text="确定" cancel-text="取消" @confirm="confirm(record.bannerid)" @cancel="cancel">
          <a-button type="primary" danger>删除</a-button>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
  <Modal ref="modalRef" @load-data="loadData"></Modal>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import request from '@/utils/request'
import {
  FileAddOutlined
} from '@ant-design/icons-vue'
import Modal from './Modal.vue'
import { message } from 'ant-design-vue'

const data = ref([])
const size = ref('large')
const modalRef = ref(null)

const loadData = async () => {
  const result = await request({
    url: '/banner/list',
  })
  data.value = result.data.data
}

const confirm = bannerid => {
  request({
    url: '/banner/delete',
    data: {
      bannerid
    }
  }).then(result => {
    loadData()
  })
};
const cancel = e => {
};

onMounted(async () => {
  loadData()
})

const columns = [{
  name: '#',
  key: 'index'
}, {
  title: '图片描述',
  key: 'alt',
  dataIndex: 'alt'
}, {
  title: '图片预览',
  key: 'preview',
  dataIndex: 'img'
}, {
  title: '图片链接',
  key: 'link',
  dataIndex: 'link'
}, {
  title: '操作',
  key: 'operation'
}];

const handleAddClick = () => {
  modalRef.value.showModal()
}

</script>

<style lang="less" scoped>
.img {
  width: 50px;
  height: 50px;
}

.btn {
  margin-bottom: 20px;
}
</style>
